<template>
	<!-- 单图组 -->
	<view class="diy-imageSingle"
		:style="{ textAlign: item.imageLocation,paddingTop: `${item.style.paddingTop}px`,paddingRight: `${item.style.paddingRight}px`,paddingLeft: `${item.style.paddingLeft}px`,paddingBottom: `${item.style.paddingBottom}px`,marginTop: `${item.style.marginTop}px`,marginBottom: `${item.style.marginBottom}px`, backgroundColor: item.style.backgroundColor }">
		<image @click="clickimage(item.link)"
			:style="{height: `${item.imageStyle.height}px`,borderRadius: `${item.imageStyle.borderRadius}px`}"
			:src="item.imageUrl" mode=""></image>
	</view>
</template>

<script>
	export default {
		name: "Images",

		/**
		 * 组件的属性列表
		 * 用于组件自定义设置
		 */
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		/**
		 * 组件的方法列表
		 * 更新属性和数据的方法与更新页面数据的方法类似
		 */
		methods: {
			clickimage(item) {
				console.log(item)
			}
		}

	}
</script>

<style lang="scss" scoped>
	.diy-imageSingle{
		padding: 0 20rpx;
	}
	.diy-imageSingle image {
		display: block;
		width: 95%;
		margin: 0 auto;
	}
</style>
